<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
			<span>5555</span>
		</ul>
		<script>
			//事件代理 事件委托
			//把自己的事件委托给父级或祖先级元素，减少事件的绑定，提高效率
			//原理：冒泡
			//以后绑定的元素也能触发事件
		
		
			//普通绑定事件的方法
			// let lis=document.querySelectorAll("li");
			// for(let i=0;i<lis.length;i++){
			// 	lis[i].onclick=function(){
			// 		console.log(i);
			// 	}
			// }
			

			let ul=document.querySelector("ul");
			ul.onclick=function(e){
				//console.log(e.target);
				//console.log(e.target.tagName);//获取目标元素的标签名 大写
				if(e.target.tagName=="LI"){
					console.log("1111");
				}
			}
			
			let li=document.createElement("li");
			li.innerHTML="666";
			ul.appendChild(li);
		</script>
	</body>
</html>
